import { dayjs } from "element-plus";
// import { useRouter } from "vue-router";

export default defineComponent({
	setup(props, { expose }) {
		// const router = useRouter();
		const state = reactive({
			category: [
				{ icon: "dev-total", label: "设备总数", value: 0 },
				{ icon: "dev-1", label: "在线设备", value: 0 },
				{ icon: "dev-2", label: "离线设备", value: 0 },
				{ icon: "dev-3", label: "当前告警", value: 0 }
			]
		});
		const loadData = async (deviceStatRes: any, alarmRes: any) => {
			let tadayAlarm = alarmRes?.[dayjs().format("YYYY-MM-DD")];
			state.category[2].value = tadayAlarm?.total || 0;

			let list = deviceStatRes.result || [];
			let deviceTotal = { online: 0, offline: 0 };
			list.forEach((item: any) => {
				deviceTotal.online += item.online;
				deviceTotal.offline += item.offline;
			});
			state.category[0].value = deviceTotal.online + deviceTotal.offline;
			state.category[1].value = deviceTotal.online;
			state.category[2].value = deviceTotal.offline;
			state.category[3].value = tadayAlarm?.total || 0;
		};
		expose({ loadData });
		return () => {
			return (
				<div class="device-total w-full h-full">
					<div class="block-title">
						<span>设备概览</span>
						{/* <el-link underline={false} class="more" onClick={() => router.push("/data/monitor")}>
							更多
						</el-link> */}
					</div>

					<div class="flex w-full items-center justify-center" style="height:calc(100% - 45px)">
						<div class="device-total-count">
							<div class="val">{state.category[0].value}</div>
							<div class="label">设备总数量</div>
						</div>
						<div class="device-total-count2">
							<div class="row1">
								<div class="inline-flex">
									<div class="icon icon-1"></div>
									<div class="info">
										<div class="val">{state.category[1].value}</div>
										<div class="label">在线设备</div>
									</div>
								</div>
							</div>
							<div class="line"></div>
							<div class="row2">
								<div class="flex justify-between w-full">
									<div class="flex item-1">
										<div class="icon icon-2"></div>
										<div class="info">
											<div class="val">{state.category[2].value}</div>
											<div class="label">离线设备</div>
										</div>
									</div>
									<div class="flex item-2">
										<div class="icon icon-3"></div>
										<div class="info">
											<div class="val">{state.category[3].value}</div>
											<div class="label">告警设备</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
